<template>
  <div class="table-section">
    <template v-if="tab === '1'">
      <div class="user-info-box" v-if="orgInfo.id">
        <div class="title">
          {{ orgInfo.assessmentTitle }}
        </div>
        <div class="table-head">
          <div class="user-num">{{ userNumStr }}</div>
          <div v-if="orgInfo.assessmentStatus === '3'" class="btn-box">
            <el-button size="small" class="btnBg" type="primary" @click.stop="onBtnChange">
              {{ showUserList ? '测评数据' : '测评人员' }}
            </el-button>
          </div>
        </div>
        <div class="table-head" v-if="['2', '3', '4'].includes(orgInfo.assessmentStatus)">
          <div class="user-num">
            {{ orgInfo.createByOrgName }}单位：{{ orgInfo.startTime }} ~ {{ orgInfo.endTime }} 召开民主测评会
          </div>
        </div>
        <OrgEvaluationUsers
          v-if="showUserList"
          :list="orgUserList"
          :class="[orgInfo.assessmentStatus !== '-1' ? 'full-height' : '']"></OrgEvaluationUsers>
        <OrgEvaluationRes v-else :list="orgResList"></OrgEvaluationRes>
        <div v-if="showUserList && orgInfo.assessmentStatus === '-1'" class="audit-btn-box">
          <el-button size="small" class="btnBg" type="primary" @click.stop="submitTask('2')">通过</el-button>
          <el-button size="small" class="btnBg" type="primary" @click.stop="submitTask('3')">不通过</el-button>
        </div>
      </div>
      <Empty v-else style="height: 100%"></Empty>
    </template>
    <template v-else>
      <EvaluationResData :page-type="'sum'" :searchParams="searchParams"></EvaluationResData>
    </template>
    <!-- 提示 start -->
    <XnDialog
      title="提示"
      :visible.sync="showTips"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
      append-to-body
      class="collect_dialog"
      @close="showTips = false">
      <template>
        <div>
          <i class="color_warning_dia el-icon-warning"></i>
          {{ tipsMsg }}
        </div>
        <div class="bot_tips bot_tips_end">
          <el-button class="btnBorder" type="primary" @click.stop="showTips = false" size="small">取 消</el-button>
          <el-button class="btnBg" type="primary" @click.stop="onSubmitTask" size="small">确 定</el-button>
        </div>
      </template>
    </XnDialog>
    <!-- 提示 end -->
  </div>
</template>
<script>
import { getAssessmentDetail, updateAssessmentCheckStatus, listResultByAssessmentId } from '@apis/mzEvaluation.js'

import OrgEvaluationUsers from './components/OrgEvaluationUsers.vue'
import OrgEvaluationRes from './components/OrgEvaluationRes'
import EvaluationResData from './components/EvaluationResData'
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'EvaluationSumMainNew',
  components: {
    OrgEvaluationUsers,
    OrgEvaluationRes,
    EvaluationResData,
    XnDialog,
  },
  emits: ['success'],
  props: {
    // 头部页签
    tab: {
      type: String,
      default: '1',
    },
    // 传参
    params: {
      type: Object,
      default: () => {},
    },
    // 组织信息
    orgInfo: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    tab: {
      handler(id) {
        if (id === '2') {
          this.showUserList = true
        }
      },
      immediate: true,
      deep: true,
    },
    orgInfo: {
      handler(obj) {
        if (obj && obj.assessmentTitle) {
          this.orgUserList = []
          this.orgResList = []
          this.showUserList = true
          this.getOrgUserList()
        }
      },
    },
  },
  computed: {
    searchParams() {
      const param = {
        ...this.params,
        ...this.orgInfo,
        title: this.params.key || '',
        status: this.params.assessmentStatus || '0',
      }
      return param
    },
  },
  data() {
    return {
      showUserList: true, // true-展示测评人员，false-展示测评数据
      orgUserList: [], // 测评人员列表
      orgResList: [], // 测评人员数据
      userNumStr: '',
      auditType: '1', // 审核类型
      showTips: false,
      tipsMsg: '',
    }
  },
  methods: {
    /* 获取组织测评人员信息 */
    getOrgUserList() {
      getAssessmentDetail({ id: this.orgInfo.id }).then(res => {
        const { leaders = [], noLeaders = [], nonCivil = [] } = res.data || {}
        this.getUserNum({ leaders, noLeaders, nonCivil })
        // leaders.forEach(item => {
        //   item.userType = '领导成员'
        // })
        // noLeaders.forEach(item => {
        //   item.userType = '非领导成员'
        // })
        // nonCivil.forEach(item => {
        //   item.userType = '非公务员成员'
        // })
        const allUsers = [...leaders, ...noLeaders, ...nonCivil]
        this.orgUserList = allUsers.concat()
      })
    },

    /* 获取测评结果 */
    getOrgResList() {
      const param = {
        assessmentId: this.orgInfo.id,
      }
      listResultByAssessmentId(param).then(res => {
        if (res.status === 200) {
          const { resultVOS = [] } = res.data || {}
          this.orgResList = resultVOS.concat()
        }
      })
    },

    /* 监听按钮切换 */
    onBtnChange() {
      this.showUserList = !this.showUserList
      if (!this.showUserList && this.orgResList.length === 0) {
        this.getOrgResList()
      } else if (this.showUserList && this.orgUserList.length === 0) {
        this.getOrgUserList()
      }
    },

    /*  */
    getUserNum({ leaders = [], noLeaders = [], nonCivil = [] }) {
      let totalStr = ''
      totalStr += leaders && leaders.length > 0 ? `领导成员${leaders.length}人` : ''
      totalStr +=
        noLeaders && noLeaders.length > 0
          ? leaders && leaders.length
            ? `被评价人员${noLeaders.length}人`
            : `被评价人员${noLeaders.length}人`
          : ''
      totalStr +=
        nonCivil && nonCivil.length > 0
          ? noLeaders && noLeaders.length
            ? `被评价人员${nonCivil.length}人`
            : `被评价人员${nonCivil.length}人`
          : ''
      this.userNumStr = totalStr
    },

    /* 测评任务审核操作 */
    submitTask(type) {
      this.auditType = type
      this.tipsMsg = type === '2' ? '确定审核通过参与的民主测评人员？' : '确定审核不通过参与的民主测评人员？'
      this.showTips = true
    },

    onSubmitTask() {
      updateAssessmentCheckStatus({
        assessmentId: this.orgInfo.id,
        assessmentStatus: this.auditType,
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('操作成功')
          this.$emit('success')
          this.showTips = false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.table-section {
  height: 100%;
  background: #fff;
  padding: 0 20px;
  .user-info-box {
    height: 100%;
    position: relative;
    .title {
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
    }
    .table-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      .user-num {
        font-size: 13px;
        color: #666;
      }
      .btn-box {
        display: flex;
      }
    }
    .full-height {
      height: calc(100% - 140px);
    }
    .audit-btn-box {
      position: absolute;
      bottom: 0;
      height: 50px;
      width: 100%;
      background-color: #f5f7fa;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  /deep/.empty .img {
    margin-top: 0;
  }
}
</style>
